<script lang="ts" setup>
import { h, reactive, ref, toRefs } from 'vue'
import { PlaySquareOutlined } from '@ant-design/icons-vue'
import { Api } from '@/api'
import to from '@/utils/awaitTo'
import { message } from 'ant-design-vue'

// 引用声明
const props = defineProps({
  row: {
    type: Object,
    default: () => {
    }
  }
})

// 引用事件
const emits = defineEmits(['callback'])

// 响应式数据
const formRef = ref()
const state = reactive({
  open: false,
  title: '发布视频',
  form: {
    videoId: '',
    status: '', //状态
    tiktokVideoId: '',//视频ID
    url: '',//分享地址
    urls: '', //获取ID
    remark: '' //理由
  },
  rules: {
    status: [
      { required: true, message: `请选择状态哦`, trigger: 'blur' }
    ],
    tiktokVideoId: [
      { required: true, message: `请填写视频ID哦`, trigger: 'blur' }
    ],
    url: [
      { required: true, message: `请选择分享地址哦`, trigger: 'blur' }
    ]
  }
})

const { open, rules, form, title } = toRefs(state)

const handleOpen = () => {
  console.log(props.row)
  form.value.videoId = props.row.videoId
  open.value = true
}


const handleOk = () => {
  formRef.value.validate().then(async (values) => {
    const [error, data] = await to(Api.video.videoReleaseVideo(form.value))
    if (!error) {
      console.log(data)
      open.value = false
      message.success(`发布成功`)
      emits('callback')
    }
  }).catch((error: Error) => {
    console.log(error)
  })
}


/** 发布视频 */
const PushLishVideoTypeDict = [
  {
    label: '成功',
    value: '1'
  },
  {
    label: '失败',
    value: '2'
  }
]

</script>

<template>
  <div>
    <a-button :disabled="true" :icon="h(PlaySquareOutlined)" type="primary" @click="handleOpen">发布视频</a-button>
    <a-modal v-model:open="open" :title="title" width="100" @ok="handleOk">
      <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="form.status">
            <a-radio v-for="item in PushLishVideoTypeDict" :key="item.value" :value="item.value">{{
                item.label }}
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item v-if="Number(form.status) === 1" label="视频ID" name="tiktokVideoId">
          <a-input v-model:value="form.tiktokVideoId" :showCount="true" />
        </a-form-item>


        <a-form-item v-if="Number(form.status) === 1" label="分享地址" name="url">
          <a-input v-model:value="form.url" />
        </a-form-item>

        <a-form-item v-if="Number(form.status) === 2" label="理由(富文本编辑器)" name="remark">
          <!--          <wangeditor-vue v-model="form.remark" />-->
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>

</style>
